<template>
	<view class="uni-pagination-box">
		<!-- #ifndef MP -->
		<picker class="select-picker" mode="selector" :value="pageSizeIndex" :range="option" @change="changeSize">
			<button type="default" size="mini" :plain="true">
				<text>{{option[pageSizeIndex]}}
					{{$t('common.piecePerPage')}}</text>
				<uni-icons class="select-picker-icon" type="arrowdown" size="12" color="#999"></uni-icons>
			</button>
		</picker>
		<!-- #endif -->
		<uni-pagination show-icon :page-size="pagination.limit" v-model="pagination.page" :total="total"
			@change="onPageChanged" />
	</view>
</template>

<script>
	export default {
		props: {
			total: {
				default: 0
			}
		},
		data() {
			return {
				option: [10, 15, 20, 50, 100],
				pageSizeIndex: 0,
				pagination: {
					page: 1,
					limit: 10
				}
			}
		},
		methods: {
			changeSize(e) {
				this.pageSizeIndex = e.detail.value;
				this.pagination.limit = this.option[this.pageSizeIndex];
				this.emit();
			},
			onPageChanged(e) {
				this.emit();
			},
			emit() {
				this.$emit("load", this.pagination)
			},
			pageInfo() {
				return this.pagination;
			},
			reset() {
				this.pagination = {
					page: 1,
					limit: 10
				}
			}
		}
	}
</script>

<style>

</style>
